<template>
    <div>
        <h3>vu2-vu3数据代理机制对比</h3>
    </div>
</template>

<script>
export default {
    setup() {
        // 1.---------------------vue2---------------------------
        // let user = { id: 1, name: "李四" }//被代理数据
        // let data = {}//代理对象
        // // this.data = user//手动模拟将user里面的数据一次挂载到data中的过程

        // for (let key in user) {
        //     Object.defineProperty(data, key, {
        //         configurable: true,//是否可以删除此属性
        //         enumerable: true,//是否是可枚举的属性
        //         get() {
        //             console.log('读取了属性', key)
        //             return user[key]
        //         },
        //         set(newV) {
        //             console.log('修改了属性', key)
        //             user[key] = newV
        //         },
        //         // 没有拦截删除操作的方法
        //         // delete() { }
        //     })
        // }

        // console.log(data)
        // console.log(data.id)//读取 get this.id
        // data.id = 100//修改 set
        // data.age = 20
        // console.log(data)
        // data.age = 1000

        // // 删除对象中的属性
        // delete (data.id)
        // console.log(data)

        // 2.------------------------------vue3--------------------------
        // Proxy
        // Reflect
        let desc = Symbol('我是唯一的key')
        let user = { id: 1, name: "李四", [desc]: "我是Symbol定义的key" }//被代理数据

        // 获取user中所有的key []
        console.log([...Object.keys(user), ...Object.getOwnPropertySymbols(user)])
        console.log(Reflect.ownKeys(user))

        let data = new Proxy(user, {
            // 监听get读取 值
            get(user, key) {
                console.log('读取了属性', key)
                // return user[key]
                return Reflect.get(user, key)
            },
            // 监听set修改 bool
            set(user, key, newV) {
                console.log('修改了属性', key)
                // return user[key] = newV
                return Reflect.set(user, key, newV)
            },
            // 监听delete删除 bool
            deleteProperty(user, key) {
                console.log('删除了属性', key)
                // return delete (user[key])
                return Reflect.deleteProperty(user, key)
            }
            // ........13种拦截方式
        })

        // console.log(data)
        // console.log(data.name)
        // data.id = 100
        data.sex = "男"
        console.log(data)
        console.log(data.sex)
        delete (data.name)

    }
};
</script>

<style scoped></style>
